<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标触发事件</title>
</head>
<body>
用户名：<input type="text" name="username" id="username">
下拉框：<select name="cityName" id="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="shenzhen">深圳</option>
    <option value="guangzhou">广州</option>
</select>
<script>
    var username = document.querySelector("input");
    //失去焦点事件
    username.onblur = function (e) {
        console.log(e);
    }
    //获得焦点事件
    username.onfocus = function (e) {
        console.log(e);
    }
    //下拉框变化事件
    var cityName = document.querySelector("select");
    cityName.onchange = function (e) {
        console.log(this.value);
    }
</script>
</body>
</html>